<template>
  <div class="user-list">
    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">



        <a-input-search placeholder="用户名/手机号" enter-button  style="width: 180px;margin-right:10px;" v-model="key" allowClear :size="size"
          @input="onSearch" @search="onSearch" />

        <div>
          <span class="key">佣金发放时间: </span>
          <iDatePicker showTime style="margin-left: 10px;" v-model="filter.start_at" :size="size"></iDatePicker>
          <span style="margin-left: 10px;">至</span>
          <iDatePicker showTime style="margin-left: 10px;" v-model="filter.end_at" :size="size"></iDatePicker>
        </div>
        <a-button style="margin-left: 10px; float: right;" type="primary" @click="refresh">
          筛选
        </a-button>
        
        <a href="javascript:;" @click="handleEditSku()" style="margin-left:20px;">配置周排名奖品</a>
        <a href="javascript:;" @click="handleEditUserRank()" style="margin-left:20px;">审核周排名</a>
      </div>

    </div>

    <a-table
      class="table"
      :rowKey="row => row.uuid"
      :dataSource="list"
      :pagination="pagination"
    >
      <a-table-column
        title="姓名"
        key="name"
        width="180px"
      >
        <template slot-scope="row">
          <div class="user" v-if="row.user">
            <img class="headimg" :src="row.user.headimg" alt="用户头像">

            <div class='right'>
              <div class="top">
                <span>{{ row.user.name }}</span>
                <a-icon class="gender-man" v-if="row.user.gender==='男'" type="man" />
                <a-icon class="gender-woman" v-else-if="row.user.gender==='女'" type="woman" />
              </div>
              <div class="bottom" style="margin-top: 4px;">

                <span class="marked-tag" :class="{actived: row.user.marked_at}">标记</span>
                <span>{{row.user.phone}}</span>
                <a-tag color="red" style="margin-left:10px;" v-if="row.user.status === 2">已拉黑</a-tag>

              </div>
            </div>
          </div>
        </template>
      </a-table-column>
      
      <a-table-column
        title="推广订单总额"
        width="100px"
      >
        <template slot-scope="row">
          <div>红包: {{row.order_sum / 100}}元</div>
        </template>
      </a-table-column>

      <a-table-column
        title="已结算佣金"
        width="100px"
      >
        <template slot-scope="row">
          <div>红包: {{row.sum_money / 100}}元</div>
        </template>
      </a-table-column>

      
    </a-table>
    
    <EditSku v-if="isEditSku" :info="info" @close="isEditSku = false"></EditSku>
    <EditUserRank v-if="isEditUserRank" :info="info" @close="isEditUserRank = false"></EditUserRank>
    <ExportPopup @hide="isExport=false" :isShow="isExport"></ExportPopup>

  </div>

</template>
<script>
import { getUserList, updateUser } from '@/api/users'
import moment from 'moment'
import ExportPopup from "./components/ExportPopup"
import ISwitch from '@/components/ISwitch/ISwitch'
import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"
import EditUserRank from './components/EditUserRankPopup.vue'
import EditSku from './components/EditSkuPopup.vue'

export default {
  name: 'UserList',
  components: {
    ExportPopup,
    ISwitch,
    EditSku,
    IDatePicker,
    EditUserRank,
  },
  data () {
    return {
      size: 'default',
      isFilter: false,
      isEditSku: false,
      isEditUserRank: false,
      info: {},
      filter: {
        start_at: '',
        end_at: ''
      },
      statusList: [
        {
          text: '全部',
          key: 'level1'
        },
        {
          text: '拉黑的',
          key: 'blocked'
        }
      ],
      // actived: 'wechat',
      keys: {
        type: 'level1',
        agent_level: undefined
      },
      statusTotal: {
        level1: 0,
        blocked: 0
      },
      loading: false,
      list: [],
      page: 1,
      per_page: 10,
      total: 0,
      key: '',
      sort: 'time',
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      timeout: null,
      isExport: false,
      agentLevelList: []
    }
  },
  computed: {
    pagination () {
      return {
        defaultPageSize: this.per_page,
        defaultCurrent: this.page,
        total: this.total,
        showTotal: total => `共 ${total} 条`
      }
    }
  },
  filters: {
    formatDate (value) {
      return value ? moment(value).fromNow() : ''
    },
    formatDate2 (value) {
      return value ? moment(value).format('YYYY-MM-DD') : ''
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    sort(val) {
      this.fetchData()
    },
    keys: {
      handler(value) {
        this.refresh()
      },
      deep: true
    }
  },
  methods: {
    onPaginationChange (e) {
      this.page = e.current
      this.per_page = e.pageSize
      this.fetchData()
    },
    refresh () {
      this.page = 1
      this.fetchData()
      //this.fetchTotalData()
    },
    onSearch (e) {
		this.page = 1
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.fetchData()
      }, 300)
    },
    // 编辑奖品列表
    handleEditSku(row) {
      this.isEditSku = true
      this.info.rank_type = 1
    },
    // 审核周排行
    handleEditUserRank(row) {
      this.isEditUserRank = true
      this.info.rank_type = 1
    },    
    fetchData () {
      this.loading = true
      this.$http.get('/agents-rank', {
        'params': {
          page: this.page,
          per_page: this.per_page,
          key: this.key,
          sort: this.sort,
          agent_level: this.keys.agent_level,
          created_at_start: this.filter.start_at,
          created_at_end: this.filter.end_at,
        }
      }).then(res => {
        this.list = res.data.list
        this.total = res.data.item_total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">

  .filter-c {
    // margin: 20px 0px 0px 0px;
    margin-top: 10px;
    padding: 10px 10px 10px 10px;
    background: #F7F8FA;

    display: flex;

    .key {
      font-weight: 500;
    }
  }
</style>

<style lang="less" scoped>

  .marked-tag {
    border-radius: 50px;
    border: 1px solid #666;
    font-size: 10px;
    padding: 1px 6px;
    color: #666;
    cursor: pointer;
    margin-right: 6px;

    &.actived {
      background: #666;
      color: white;
    }
  }


  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

.inviter-headimg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.content-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.table {
  background-color: #fff;
  .user {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;
    img {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border: 1px solid #e1e1e1;
      margin-right: 6px;
      border-radius: 50%;
      overflow: hidden;
    }
    .gender-man, .gender-woman {
      margin-left: 5px;
      font-size: 12px;
    }
    .gender-man {
      color: #409EFF;
    }
    .gender-woman {
      color: #F56C6C;
    }
  }
}
</style>
